<template>
  <a-row :gutter="10">
    <a-col :md="leftColMd" :sm="24" style="margin-bottom: 20px">
      <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">

              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="门店编号">
                  <a-input placeholder="请输入门店编号" v-model="queryParam.terminalCode"></a-input>
                </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <a-form-item label="门店名称">
                  <a-input placeholder="请输入门店名称" v-model="queryParam.terminalName"></a-input>
                </a-form-item>
              </a-col>

              <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
              </a-col>

            </a-row>
          </a-form>
        </div>

        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button @click="handleAdd" type="primary">新增</a-button>
          <!--<a-button type="primary" icon="start" @click="startorstop('009')">启用</a-button>-->
          <!--<a-button type="primary"  @click="startorstop('003')">停用</a-button>-->
          <!--<a-button tabindex="primary" icon="delete" @click="batchDel">删除</a-button>-->
        </div>

        <!-- table区域-begin -->
        <div>
<!--          <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
<!--            <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{-->
<!--            selectedRowKeys.length }}</a>项-->
<!--            <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
<!--          </div>-->

          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            class="j-table-force-nowrap"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            @change="handleTableChange">

            <span slot="action" slot-scope="text, record">
            <a @click="handleEdit(record)">调整</a>

            <a-divider type="vertical"/>
            <a-dropdown>
              <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
              <a-menu slot="overlay">
                 <a-menu-item>
                  <a @click="handleOpen(record)">门店信用额度明细记录</a>
                </a-menu-item>
                <!--<a-menu-item>-->
                <!--<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">-->
                <!--<a>删除</a>-->
                <!--</a-popconfirm>-->
                <!--</a-menu-item>-->
              </a-menu>
            </a-dropdown>
          </span>
            </a-table>
          </div>
        <!-- table区域-end -->

        <!-- 表单区域 -->
        <credit-modal ref="modalForm" @ok="modalFormOk"></credit-modal>
      </a-card>
    </a-col>
    <a-drawer
      closable
      title="门店信用额度明细记录"
      width="50%"
      :visible="rightcolval"
      switchFullscreen
      @close="handleCancel"
      cancelText="关闭"
      style="height: 100%;overflow: auto;padding-bottom: 53px;">
        <a-col :md="rightColMd" :sm="24" >
          <a-card :bordered="false">
            当前信用额度余额： {{this.usableQuota}}
            <a-table
              style="height:500px"
              ref="table2"
              bordered
              size="middle"
              rowKey="id"
              :columns="columns2"
              :dataSource="dataSource2"
              :pagination="ipagination2"
              :loading="loading2"
              @change="handleTableChange2">
            </a-table>
          </a-card>
        </a-col>
      </a-drawer>
  </a-row>
</template>

<script>
  import '@/assets/less/TableExpand.less'
  import creditModal from './modules/CreditModal'
  import {PageListMixin} from '@/mixins/PageListMixin'
  import {getAction, postAction} from '@/api/manage'
  import ARow from 'ant-design-vue/es/grid/Row'
  import ARangePicker from 'ant-design-vue/es/date-picker/RangePicker'
  import {filterObj} from '@/utils/util'

  export default {
    name: 'TerminalPoolList',
    mixins: [PageListMixin],
    components: {
      ARangePicker,
      ARow,
      creditModal,
    },
    data() {
      return {
        description: '门店费用池',
        model1: {},
        model2: {},
        currentRoleId: '',
        custCode: '',
        usableQuota: '',
        queryParam1: {},
        queryParam2: {},
        dataSource1: [],
        dataSource2: [],
        columns2:[],
        ipagination1: {
          current: 1,
          size: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        ipagination2: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30', '40', '50'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        isorter1: {
          column: 'createTime',
          order: 'desc'
        },
        isorter2: {
          column: 'createTime',
          order: 'desc'
        },
        filters1: {},
        filters2: {},
        loading1: false,
        loading2: false,
        selectedRowKeys1: [],
        selectedRowKeys2: [],
        selectionRows1: [],
        selectionRows2: [],
        test: {},
        rightcolval: false,
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            scopedSlots: {customRender: 'action'}
          },
          {
            title: '门店编号',
            align: "center",
            dataIndex: 'terminalCode'
          },
          {
            title: '门店名称',
            align: "center",
            dataIndex: 'terminalName'
          },
          {
            title: '经销商编号',
            align: "center",
            dataIndex: 'custCode'
          },
          {
            title: '经销商名称',
            align: "center",
            dataIndex: 'custName'
          },
          // {
          //   title: '初始期额度',
          //   align: "center",
          //   dataIndex: 'initQuota'
          // },
          // {
          //   title: '调整值',
          //   align: "center",
          //   dataIndex: 'adjustQuota'
          // },
          {
            title: '可用余额',
            align: "center",
            dataIndex: 'usableQuota'
          },
          {
            title: '更新人',
            align: "center",
            dataIndex: 'updateName'
          },
          {
            title: '更新日期',
            align: "center",
            dataIndex: 'updateDate'
          }
        ],
        columns2: [
          {
            title: '类型',
            align: 'center',
            dataIndex: 'type_dictText',

          },
          {
            title: '操作人',
            align: 'center',
            dataIndex: 'createName'
          },
          {
            title: '发生时间',
            align: 'center',
            dataIndex: 'createTime'
          },
          {
            title: '业务单号',
            align: 'center',
            dataIndex: 'businessNo'
          },
          {
            title: '调整值',
            align: 'center',
            dataIndex: 'adjustQuota'
          },
          {
            title: '备注',
            align: 'center',
            dataIndex: 'remarks'
          }
        ],
        // 高级查询参数
        superQueryParams2: '',
        // 高级查询拼接条件
        superQueryMatchType2: 'and',
        url: {
          list: window._CONFIG['domianURL'] + "/credit/cnCreditHead/findPageList",
          list2: window._CONFIG['domianURL'] + '/credit/cnCreditDetail/findPageList'
        },
        leftColMd: '',
        rightColMd: '',
      }
    },
    comments: {
      leftColMd() {
        return this.selectedRowKeys1.length === 0 ? 24 : 12
      },
      rightColMd() {
        return this.selectedRowKeys1.length === 0 ? 0 : 12
      }
    },
    methods: {
      handleEdit: async function (record) {
        if (this.url.detail) {
          const res = await getAction(this.url.detail, {id: record.id})
          if (res && res.result) {
            record = res.result
          }
        }
        this.$refs.modalForm.edit(record);
        this.$refs.modalForm.title = "调整";
        this.$refs.modalForm.disableSubmit = false;
      },
      handleOpen(record) {
        this.rightcolval = true
        this.selectedRowKeys1 = [record.id]
        this.model1 = Object.assign({}, record)
        this.currentRoleId = record.terminalCode
        this.custCode = record.custCode
        this.usableQuota = record.usableQuota
        this.onClearSelected2()
        this.loadData2()
      },
      onSelectChange2(selectedRowKeys, selectionRows) {
        this.selectedRowKeys2 = selectedRowKeys
        this.selectionRows2 = selectionRows
      },
      onClearSelected2() {
        this.selectedRowKeys2 = []
        this.selectionRows2 = []
      },
      onClearSelected1() {
        this.selectedRowKeys1 = []
        this.selectionRows1 = []
      },
      onSelectChange1(selectedRowKeys, selectionRows) {
        this.rightcolval = true
        this.selectedRowKeys1 = selectedRowKeys
        this.selectionRows1 = selectionRows
        this.model1 = Object.assign({}, selectionRows[0])
        console.log(this.model1)
        this.currentRoleId = selectedRowKeys[0]
        this.loadData2()
      },
      onClearSelected() {
      },
      getQueryParams2() {
        //获取查询条件
        let sqp = {}
        if (this.superQueryParams2) {
          sqp['superQueryParams'] = encodeURI(this.superQueryParams2)
          sqp['superQueryMatchType'] = this.superQueryMatchType2
        }
        var param = Object.assign(sqp, this.queryParam2, this.isorter2, this.filters2)
        param.field = this.getQueryField2()
        param.current = this.ipagination2.current
        param.size = this.ipagination2.pageSize
        return filterObj(param)
      },
      getQueryField2() {
        //TODO 字段权限控制
        var str = 'id,'
        this.columns2.forEach(function (value) {
          str += ',' + value.dataIndex
        })
        return str
      },
      loadData2(arg) {
        if (!this.url.list2) {
          this.$message.error('请设置url.list2属性!')
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination2.current = 1
        }
        if (this.currentRoleId === '') return
        let params = this.getQueryParams2()//查询条件
        params.terminalCode = this.currentRoleId
        params.custCode = this.custCode
        this.loading2 = true
        var that = this
        postAction(this.url.list2, params).then((res) => {
          if (res.success) {
            that.dataSource2 = res.result.records
            that.ipagination2.total = res.result.total
          }
          that.loading2 = false
        })
      },
      handleTableChange2(pagination, filters, sorter) {
        //分页、排序、筛选变化时触发
        //TODO 筛选
        if (Object.keys(sorter).length > 0) {
          this.isorter2.column = sorter.field
          this.isorter2.order = 'ascend' == sorter.order ? 'asc' : 'desc'
        }
        this.ipagination2 = pagination
        this.loadData2()
      },
      handleCancel(){
        this.rightcolval=false
      },
      hideUserList() {
        //this.rightcolval = 0
        this.selectedRowKeys1 = []
      },
    }
  }
</script>

<style scoped>
  @import '~@assets/less/common.less';
</style>
